// 路由拦截，必须引入router
import router from '@/router'
import store from '@/store'

const whiteList = ['/login', '/404']

// 模拟的调用,目的看到action的效果
// setTimeout(() => {
//   store.dispatch('user/getUserInfo')
// }, 500)
// 权限的拦截

// 需求：获取用户资料
// 1、获取的先决条件是：必须有token
// 2、获取资料还要去判断，个人信息是否已经存在了，如果已经存在没有必要获取
// 3、如果有token，但是用户资料不存在的时候才去获取用户资料
router.beforeEach(async function(to, from, next) {
  // 1、判断是否有token
  const token = store.getters.token
  if (token) {
    // 只有代码走到这里，才说明有token
    // 判断当前用户是否已经获取过个人信息了
    // 根据userId判断用户是否获取过资料
    const userId = store.getters.userId
    if (!userId) {
      //  获取用户资料
      //  触发获取用户信息的action
      const { roles: { menus }} = await store.dispatch('user/getUserInfo') // menus
      const newRoutes = await store.dispatch('permission/filterRoutes', menus)
      // 进行动态路由的添加
      // console.log(newRoutes)
      router.addRoutes([...newRoutes, { path: '*', redirect: '/404', hidden: true }])
      // 拿到了权限标识 ==> 筛选出动态路由模块
      // addRoutes动态路由的添加
      // 添加完毕之后再放行
      // 重新跳转一次,vue-router的已知缺陷，配置完动态路由，需要重新进行跳转
      next(to.path)
      return
    }
    // 如果已经登陆了，但是又要去登录界面，重定向到主页
    // 但是没有去登录界面，直接放行
    if (to.path === '/login') {
      next('/')
    } else {
      next()
    }
  } else {
    // 如果没有登录，判断去的是不是白名单界面，如果是，直接放行
    if (whiteList.includes(to.path)) {
      next()
    } else {
      //  去的时候需要权限的界面
      // 重定向到登录界面
      next('/login')
    }
  }
})

// 动态路由配置的解决方法
// 静态路由：所有人都可以访问的叫做静态路由（登录路由、404、首页）
// 动态路由：需要进行权限的判断，只有拥有当前路由的权限才可以访问

// 他们之间是如何协作的？
// 1、静态路由写死。
// 2、根据用户信息获取当前用户拥有的动态路由权限
// 3、路由里面addRoute进行动态路由的添加

// 动态路由的核心思想：
// 默认情况路由配置只有静态路由
// 获取到用户信息的时候，根据用户的权限点(menus)筛选得出当前用户有权限的动态路由模块列表
// 拿到列表之后，通过addRoutes进行动态的添加

// 存储到vuex的目的：进行左侧菜单的渲染
// vuex里面的路由表左侧菜单的展示
